<template>
  <div class="chat">
    <div class="chatItem">
        <div v-for="(item, index) in list" :key="index" :class="{'item': true, 'active':item.active}" @click="selectItem(item)" >
            <div class="left">
                <img :src="item.imgSrc" alt="">
            </div>
            <div class="right">
                <p class="title">{{item.name}}</p>
            </div>
        </div>
    </div>
    <div class="itemRoom">
        <div class="itemBox">
            <div class="userNameBox">
                <div class="left">
                    <div class="userName">
                        <p>{{currenItem.roomName}}</p>
                    </div>
                    <div class="userSynopsis">
                        <p>{{currenItem.synopsis}}</p>
                    </div>
                </div>
                <div class="right">
                    <img :src="imgSrc" alt="">
                </div>
            </div>
            <div class="userInfoBox">
                <div class="beizhu"><span class="li">备&nbsp;&nbsp;注</span>{{}}</div>
                <div class="location"><span class="li">地&nbsp;&nbsp;区</span>{{currenItem.location}}</div>
                <div class="user"><span class="li">微信号</span>{{currenItem.user}}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
    name: 'Chat',
    data() {
        return {
            active: false,
            list: [
                {name: '哲钊', imgSrc:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', synopsis: '我是哲钊我傻逼!', location: '广东 潮州', user: 'z764017993' },
                {name: '傻逼', imgSrc:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', synopsis: 'hello!', location: '广东 潮州', user: 'z764017993'},
                {name: '溢铠', imgSrc:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', newInfo: 'hello!', location: '广东 潮州', user: 'z764017993'},
                {name: '老屁眼', imgSrc:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', synopsis: 'hello!', location: '广东 潮州', user: 'z764017993'},
                {name: 'xinxin', imgSrc:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', synopsis: 'hello!', location: '广东 潮州', user: 'z764017993'},
            ],
            currenItem: { roomName:'', synopsis:'', imgSrc: '', location: '', user: ''   },
            imgSrc: ''
        }
    },
    methods: {
        selectItem(item) {
            this.currenItem.roomName = item.name;
            this.currenItem.synopsis = item.synopsis;
            this.imgSrc = item.imgSrc;
            this.currenItem.location = item.location;
            this.currenItem.user = item.user;
            this.$nextTick(function() {
                this.list.forEach(item => {
                    this.$set(item, 'active', false);
                })
                this.$set(item, 'active', true);
            })
        }
    },
    mounted() {
        this.currenItem.roomName = this.list[0].name;
        this.currenItem.synopsis = this.list[0].synopsis;
        this.$set(this.list[0], 'active', true);
    }
}
</script>

<style >
.chat .itemRoom .itemBox{
    margin: 60px auto;
    width: 300px;
    text-align: left;
    text-indent: 2em;
}
.chat .itemRoom .itemBox .userNameBox{
    position: relative;
    border-bottom: solid 1px black;
    height: 80px;
}
.chat .itemRoom .itemBox .userNameBox .left{
    position: absolute;
    width: 70%;
    margin: auto 0;
    left: 0;
}
.chat .itemRoom .itemBox .userNameBox .right{
    position: absolute;
    margin-right: 5%;
    right: 0;
    width: 25%;
}
.chat .itemRoom .itemBox .userNameBox .right img{
    width: 60px;
}
.chat .itemRoom .itemBox .userNameBox .right img:hover{
    cursor: pointer;
}
.chat .itemRoom .itemBox .userInfoBox{
    margin-top: 20px;
}
.li{
    color: #e3e3e3;
}
</style>